<template>
  <n-menu :options="menuOptions" :value="value"
          :default-expand-all="true" :indent="20" :on-update:value="menuUpdate"
  />
</template>

<script lang="ts">
export class Option {
  public label: string
  public key: string
  public children?: Array<Option>

  constructor(label, key?, children?) {
    this.label = label
    this.key = key
    this.children = children
  }
}

export default {}
</script>

<script lang="ts" setup>
import { NMenu, MenuOption } from 'naive-ui'
import { nav } from '../../shared/client/window'

const props = defineProps({
  options: {
    type: Array<Option>,
    required: true
  },

  value: {
    type: String,
    required: true
  }
})

const menuOptions = props.options as MenuOption[]

function menuUpdate(key: string) {
  nav(key)
}
</script>

<style>
</style>
